<template>
    <div style="margin-bottom:50px">
        <v-toolbar flat color="primary">
           <!-- 上部标题栏 -->
           <v-btn icon flat>
                <v-icon color="white" medium @click="goBack()">keyboard_arrow_left</v-icon>
           </v-btn>
           <v-toolbar-title style="margin-left:0">
               <span style="color:white">服务详情</span>
           </v-toolbar-title>
            <v-btn icon flat style="position:absolute;margin-right:16px;right:0px;margin-top:0">
                <v-icon color="white" medium>error_outline</v-icon>
            </v-btn>  
        </v-toolbar>


        <!-- 服务详情 -->
        <v-layout wrap id="details_layout">

            <!-- 商家图片 -->
            <v-carousel style="height:250px">
                <v-carousel-item
                v-for="(item,i) in services.attachments"
                :key="i"
                :src="item.attachmentUrl"
                ></v-carousel-item>
            </v-carousel>           
                   
        </v-layout>

        <v-container>
        <v-layout row wrap>
              <!-- 商家信息 -->
            <v-flex xs2>
                <v-avatar slot="activator" size="80px">
                    <img src="http://img1.3lian.com/2015/w1/76/d/81.jpg">
                </v-avatar>
            </v-flex>
            <v-flex xs5>
                <h3><strong>我是用户</strong><v-icon>person</v-icon></h3>
                <p style="color:gray;font-size:12px;margin-top:10px">发布于2天前</p>
            </v-flex>
            <v-flex xs4>
                <h3 style="margin-left:30%;margin-top:25%">￥{{services.shopAvgPrice}}</h3>
            </v-flex>
        </v-layout>

         <!-- 服务详情 -->
        
        <v-layout row wrap>
            <v-flex xs8>
                <h3 style="margin:4% 0 4% 0">{{services.shopName}}</h3>    
            </v-flex>
            <v-flex xs4 text-xs-center style="margin-top:0">
                <v-chip small>{{services.shopType}}</v-chip>
            </v-flex>
            <v-flex xs12 id="details_flex_xs12">
                <p>{{services.shopDetail}}</p>
            </v-flex>
            <v-flex xs1>
                <v-icon color="gray">place</v-icon>
            </v-flex>
            <v-flex xs9>
                <p style="color:gray;font-size:15px">{{services.shopAddress}}</p>
            </v-flex>
        </v-layout>
        </v-container>

        <!-- 收藏及拨打电话底部栏 -->
        <div style="height:50px;width:100%;bottom:0px;position:fixed">
            <v-layout row id="layout">
                <v-flex xs6 text-xs-center id="collect">
                    <!-- 用if  未收藏就显示空心五角星-->
                    <v-btn v-show="!hasCollected" flat large icon color="primary" @click="collect()">
                        <v-icon large id="star">star_border</v-icon>
                    </v-btn>      

                    <!-- 用if  收藏就显示实心五角星-->
                    <v-btn v-show="hasCollected" flat large icon color="primary" @click="cancelCollect()">
                        <v-icon large id="star">star</v-icon>
                    </v-btn>
                                   
                </v-flex>
                 <v-flex xs6 text-xs-center id="chat" style="background:#4caf50">
                    <v-btn flat large icon color="white">
                        <v-icon large id="chat">phone</v-icon>
                    </v-btn>                   
                </v-flex>
            </v-layout>   
        </div>
    </div>      
</template>

<script>

export default {

    name:'news-details',
   
    data(){
        return{

            services:{
                attachments:[],
                shopType:'',
                shopName:'',
                shopAvgPrice:'',
                shopDetail:'',
                shopAddress:'',
            },

            hasCollected=false
        }
    },

    methods:{

        getServiceDetail(){
            this.$axios({
                method:'get',
                url:this.SERVER+'/api/shop/details/'+this.$route.params.serviceID,
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':'bearer '+localStorage.getItem('Access-Token')
                }
            }).then(response=>{
                    var res=response['data']['data']
                    var co=response['data']['collect']
                    console.log(res)
                    this.services.shopName=res['shopName']
                    this.services.shopType=res['shopType']
                    this.services.shopAvgPrice=res['shopAvgPrice']
                    this.services.shopDetail=res['shopDetail']
                    this.services.shopAddress=res['shopAddress']
                    this.services.attachments=res['attachments']
                    this.hasCollected=co;
                    
                }
            ),response=>({
                function(response){
                    console.log(response)
                }
            })
        },

        collect(){
            var formdata=new FormData();
            formdata.append("Id",this.$route.params.serviceID)
            this.$axios.post('/api/shop/collects',formData,{
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':''
                }
            }).then(response=>{
                    console.log(response);
                    this.hasCollected=true;
                }
            ),response=>({
                function(response){
                    console.log(response)
                }
            })
        },

        cancelCollect(){
            this.$axios({
                method:'delete',
                url:this.SERVER+'/api/shop/collects/'+this.$route.params.serviceID,
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':'bearer '+localStorage.getItem('Access-Token')
                }
            }).then(response=>{
                    console.log(response);
                    this.hasCollected=false;
                }
            ),response=>({
                function(response){
                    console.log(response)
                }
            })
        },

        goBack(){
            this.$router.back(-1);
        }
    },

    mounted(){
        this.getServiceDetail();
    }
}
</script>

<style>

    #details_layout{
        margin-left:0;
    }

    #details_flex_xs12{
        margin-top:2%
    }
</style>

<style scoped>

.flex.xs2{
    margin-left:0px;
    margin-top:5%;
}

.flex.xs4{
    margin-top:8%;
}

.flex.xs5{
    margin-left:8%;
    margin-top:8%;
}


.flex.xs9{
    margin-top:2%
}

.flex.xs12{
    margin-right:6%
}
</style>